<div fxLayoutAlign="center center">
    <div fxFlex.lt-lg="98" fxFlex.gt-md="90">

        <div class="manhua_toolBar">
            <div fxLayout="column">
                <mat-toolbar fxLayoutAlign="center center" fxLayoutGap="20px">
                    <h1>日本漫画</h1>
                    <!-- search -->
                    <mat-form-field>
                        <input matInput type="text" placeholder="search" [(ngModel)]="searchTitle" (keyup)="onKey($event)"/>
                        <button mat-button *ngIf="searchTitle" matSuffix mat-icon-button aria-label="Clear" (click)="searchTitle=''">
                            <mat-icon fontIcon="fa-times-circle"></mat-icon>
                        </button>
                    </mat-form-field>
                    <button mat-raised-button color="primary" (click)="submit()">submit</button>
                </mat-toolbar>
            </div>
        </div>
        <!-- 分类 -->
        <div fxLayout="column">
            <mat-card>
                <mat-card-content class="in_05">
                    <ul>
                        <li>
                            <strong>完结状态</strong>：
                        </li>
                        <li *ngFor="let item of finishs;" [ngClass]="{'on':param.isFinish === item.value}">
                            <a href="javascript:;" (click)="search('isFinish',item.value)">{{item.text}}</a>
                        </li>
                    </ul>
                    <ul>
                        <li>
                            <strong>漫画分类</strong>：
                        </li>

                        <li *ngFor="let item of types;" [ngClass]="{'on':param.type === item.value}">
                            <a href="javascript:;" (click)="search('type',item.value)">{{item.text}}</a>
                        </li>

                    </ul>
                    <ul>
                        <li>
                            <strong>字母分类</strong>：
                        </li>

                        <li *ngFor="let char of charets;" [ngClass]="{'on':param.char == char}">
                            <a href="javascript:;" (click)="search('char',char)">{{char=='all'?'全部':char}}</a>
                        </li>
                    </ul>
                    <ul>
                        <li>
                            <strong>更新时间</strong>：
                        </li>
            
                        <li *ngFor="let update of updates;" [ngClass]="{'on':param.update == update.value}">
                            <a href="javascript:;" (click)="search('update',update.value)">{{update.text}}</a>
                        </li>
                    </ul>
                    <ul>
                        <li>
                            <strong>漫画网站</strong>：
                        </li>
            
                        <li *ngFor="let website of websites;" [ngClass]="{'on':param.website == website.value}">
                            <a href="javascript:;" (click)="search('website',website.value)">{{website.text}}</a>
                        </li>
                    </ul>
                </mat-card-content>
            </mat-card>
        </div>
    </div>
</div>

<manhua-table #manhuaTable></manhua-table>